<template>
  <div class="collection-monitor">
    <!-- 页面标题 -->
    <van-nav-bar title="采集任务监控" left-arrow @click-left="$router.back()" />

    <!-- 功能开发中提示 -->
    <div class="coming-soon">
      <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        description="功能开发中"
      >
        <template #description>
          <div class="empty-description">
            <p>采集任务监控功能正在开发中</p>
            <p>敬请期待...</p>
          </div>
        </template>
        <van-button round type="primary" class="bottom-button" @click="$router.back()">
          返回上级
        </van-button>
      </van-empty>
    </div>

    <!-- 预览功能说明 -->
    <van-cell-group inset title="功能预览">
      <van-cell
        title="实时任务状态"
        label="实时监控数据采集任务的执行状态"
        icon="eye-o"
      />
      <van-cell
        title="任务执行日志"
        label="查看详细的任务执行日志和错误信息"
        icon="notes-o"
      />
      <van-cell
        title="性能指标监控"
        label="监控任务执行的性能指标和资源使用情况"
        icon="chart-trending-o"
      />
      <van-cell
        title="告警通知"
        label="任务异常时的告警通知和处理建议"
        icon="bell"
      />
    </van-cell-group>
  </div>
</template>

<script setup>
// 暂无逻辑，占位页面
</script>

<style scoped>
.collection-monitor {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.coming-soon {
  padding: 60px 20px;
}

.empty-description {
  color: #969799;
  font-size: 14px;
  line-height: 1.6;
}

.empty-description p {
  margin: 4px 0;
}

.bottom-button {
  width: 160px;
  height: 40px;
  margin-top: 24px;
}
</style>
